<template>
	<view class="list">
		<view class="item">
			<view class="merits">
				<text>{{obj.medal}}勋章 </text>
				<text>累计获得忠诚仅对活动积分解锁</text>
			</view>
			<view class="merits-reta">
				<view class="canvasArc">
					<canvas :style="style" :canvas-id="`myCvas${index}`" :id="`myCvas${index}`"></canvas>
				</view>
				<view class="canvasImg">
					<view class="horizontal" :style="getColor">

					</view>
					<view class="canvasAll">
						<view class="canvas1">
							<canvas :style="styleImg" :canvas-id="`myCvasImg${index}1`"
								:id="`myCvasImg${index}1`"></canvas>
							<text>100积分</text>
						</view>
						<view class="canvas2">
							<canvas :style="styleImg" :canvas-id="`myCvasImg${index}2`"
								:id="`myCvasImg${index}2`"></canvas>
							<text>500积分</text>
						</view>
						<view class="canvas3">
							<canvas :style="styleImg" :canvas-id="`myCvasImg${index}3`"
								:id="`myCvasImg${index}3`"></canvas>
							<text>1000积分</text>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			obj: {
				type: Object,
				default: {}
			},
			index: {
				type: Number,
				default: 0,
			}
		},
		data() {
			return {
				style: {
					width: 50,
					height: 50,
				},
				styleImg: {
					width: 60,
					height: 60,
					border: '1rpx solid black',
				},
				getColor: {
					backgroundColor: 'red'
				}
			}
		},
		onReady: function() {

		},
		mounted() {
			let t = this.obj.medal;
			let col = 'red';
			if (t == '忠诚') {
				col = '#fc381d';
			} else if (t == '阳光') {
				col = '#e96a1e';
			} else if (t == '美丽') {
				col = '#70c44e';
			} else if (t == '和顺') {
				col = '#4287dc';
			}
			this.getColor.backgroundColor = col;
			this.getmyCvas(col);
			this.getmyCvasAll(col);
		},
		methods: {
			getmyCvas(color) {
				const ctx = uni.createCanvasContext(`myCvas${this.index}`, this);
				ctx.arc(this.style.width / 2 + 5, this.style.height / 2, 18, 0, 2 * Math.PI)
				ctx.setStrokeStyle(color)
				ctx.lineWidth = 5;
				ctx.stroke()
				ctx.draw()
			},
			getmyCvasAll(color) {
				const ctx1 = uni.createCanvasContext(`myCvasImg${this.index}1`, this);
				const ctx2 = uni.createCanvasContext(`myCvasImg${this.index}2`, this);
				const ctx3 = uni.createCanvasContext(`myCvasImg${this.index}3`, this);
				this.setFillRect(ctx1, color, 100, 55);
				this.setFillRect(ctx2, color, 500, 300);
				this.setFillRect(ctx3, color, 1000);
				uni.createSelectorQuery().selectAll('.canvasAll .canvas1').boundingClientRect(data => {
					console.log(data);
				}).exec()
			},
			setFillRect(ctx, cl, int, num = 0) {
				let h = this.styleImg.height;
				let w = this.styleImg.width;
				var c;
				if (!num) {
					c = h
				} else {
					c = (num / int * h)
				}
				ctx.setFillStyle(cl)
				ctx.fillRect(0, h - c, w, h)
				ctx.fill()
				ctx.draw()
			}
		}
	}
</script>

<style lang="scss" scoped>
	@import "@/common/style/flex.scss";

	.list {
		padding: 40rpx;

		.item {
			.merits {
				>text:first-child {
					font-weight: bold;
					font-size: 37rpx;
					margin-right: 10rpx;
				}

				>text:last-child {
					color: #969696;
				}
			}

			.merits-reta {
				@include flex-r-center-center;
				margin-top: 10rpx;

				.canvasImg {
					position: relative;
					width: 100%;
					height: 100%;

					.horizontal {
						position: absolute;
						top: 50%;
						margin-top: -15rpx;
						width: 100%;
						// left: 0;
						right: 8rpx;
						height: 15rpx;
						z-index: -1;
						background-color: #f8381e;
					}

					.canvasAll {
						padding-top: 40rpx;
						@include flex-r-between-center;
						z-index: 11;
						margin-left: 90rpx;

						.canvas1,
						.canvas2,
						.canvas3 {
							@include flex-c-start-center;

							>text {
								margin-top: 20rpx;
								color: #969696;
							}
						}
					}
				}
			}
		}
	}
</style>